<template>
  <div class="home">
    <!-- 顶部导航 -->
    <van-nav-bar>
      <template #left
        ><van-image
          width="100"
          fit="contian"
          :src="require('../../assets/logo.png')"
      /></template>
      <template #right>
        <van-button @click="$router.push('/home/search')"><van-icon class="myicon" name="search" />搜索</van-button>
      </template>
    </van-nav-bar>
    <!-- 频道区域 -->
    <van-tabs v-model="active">
      <van-tab
        v-for="(item, index) in channelList"
        :key="index"
        :title="item.name"
      >
        <news-list :channel_id="item.id"></news-list>
      </van-tab>
      <!-- 频道管理图标 -->
      <van-icon @click="openChannel" class="channelIcon" name="wap-nav" />
    </van-tabs>
    <!-- 频道组件 -->
    <van-action-sheet v-model="channelShow" title="频道管理">
      <channel v-model="active" :channelList="channelList"></channel>
      <!-- <channel :value="active" @input="(index) => (active = index)" :channelList="channelList"></channel> -->
    </van-action-sheet>
  </div>
</template>

<script>
import { getUserChannelApi } from "@/api";
import { getChannel } from "@/utils/auth.js";
export default {
  data() {
    return {
      // 用来保存用户的频道数据
      channelList: [],
      channelShow: false,
      active: 0,
    };
  },
  methods: {
    // 打开频道面板
    openChannel() {
      this.channelShow = true;
    },
    // 单独封装一个方法用来得到频道数据
    async getUserChannel() {
      // 请求接口得到用户频道数据
      const res = await getUserChannelApi();
      // 保存数据
      this.channelList = res.data.data.channels;
    },
  },
  created() {
    // // 得到用户频道
    // this.getUserChannel();
    // 得到 token
    const token = this.$store.state.token.token;
    // 得到本地数据
    const local = getChannel();
    // 发请求到服务器：已登录 或者 未登录且本地没有数据时
    // 从本地获取：其他
    // || 短路：前面执行之后为 true, 后面就不执行了
    if (token || !local) {
      this.getUserChannel();
    } else {
      this.channelList = local;
    }
    // // 判断用户是否登录
    // if (token) {
    //   //  已登录：
    //   //    发送请求到服务器
    //   this.getUserChannel();
    // } else {
    //   //  未登录：
    //   //    判断本地是否有数据(得到本地数据)
    //   const local = getChannel();
    //   if (local) {
    //     //      有：直接获取
    //     this.channelList = local;
    //   } else {
    //     //      无：发送请求到服务器
    //     this.getUserChannel();
    //   }
    // }
  },
  components: {
    newsList: () => import("./components/newsList.vue"),
    channel: () => import("./components/channel.vue"),
  },
};
</script lang="less">

<style lang="less">
.home {
  button.van-button.van-button--default.van-button--normal {
    background: #5aabfb;
    color: #fff;
    border: none;
    border-radius: 20px;
    height: 30px;
    padding: 0 20px;
  }
  .myicon {
    color: #fff;
    margin-right: 6px;
  }
  .channelIcon {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 20px;
    height: 44px;
    line-height: 44px;
    width: 10%;
    text-align: center;
    background-color: #fff;
  }
  .van-tabs__nav.van-tabs__nav--line.van-tabs__nav--complete {
    width: 90%;
  }
}
</style>